<!DOCTYPE html>
{% load static %}
<html lang="zh">
<head>

    <meta charset="UTF-8">
    <title>笔记列表</title>
    <script src="{% static 'note_web/js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'note_web/js/md_list.js' %}"></script>
    <link rel="stylesheet" href="{% static 'note_web/css/md_list.css' %}">
    <script>
        function showContent(filename) {
            $.ajax({
                url: '/note_web/content/' + encodeURIComponent(filename),
                method: 'GET',
                success: function(data){
                    $('.content-area').html(data.content);
                    generateTableOfContents(); // 内容更新后，重新生成目录
                },
                error: function(xhr, status, error){
                    console.error(error);
                }
            });
        }
    </script>
</head>

<body>
    <main>
        <div class="container">

            <div class="file-list">
                <h2>笔记列表</h2>
                <ul>
                    {% for file in all_files %}
                        <li><a href="#" onclick="showContent('{{ file.file_name }}')">{{ file.file_name }}</a></li>
                    {% endfor %}
                </ul>
            </div>

            <div class="content-area">
                <h2>内容展示区</h2>
                <!-- 初始内容为空，点击文件名后通过AJAX填充 -->
            </div>

            <div class="table-of-contents">
                <h2>目录</h2>
            <!-- 目录内容将通过JavaScript动态填充 -->
            </div>
        </div>
    </main>

</body>
</html>
